<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表展现</title>
    <!-- 1.导入JS函数类库 -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- 2.编辑JS发起Ajax请求 -->
    <script>
        // 利用Ajax的get请求方式
        // http://localhost:8090/user/get 获取全部数据
        // 将数据以表格的形式展现
        // 种类: 1. $.get(); 2. $.post() 3. $.getJSON(); 4. $.ajax
        // js中可以根据返回值的数据动态匹配类型
        // $.get("url地址","参数",function(data){},"返回值类型")
        $(function () {

            // var name
            // var age
            // // 参数类型写法1:key=value&key2=value2
            // var args1 = "name="+name+"&age="+age;
            // 参数类型写法2:{key:value,key2:value2}
            // var args2 = {name:name,age:age}
            // 如果有参数,则直接添加,如果没有参数,则省略
            var url = "http://localhost:8090/user/get";
            $.get(url,function (data) {
                for (let user of data){
                    let id = user.id
                    let name = user.name
                    let age = user.age
                    let sex = user.sex
                    let tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
                    // 利用ID选择器定位table标签
                    // append 向每个匹配的元素内部追加内容
                    $("#tab1").append(tr)
                }
            })
        })
    </script>

</head>
<body>

<table id="tab1" border="1px" width="700" align="center">
    <tr>
        <td colspan="4" align="center"><h2>表格数据</h2></td>
    </tr>
    <th>ID编号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>

</table>

</body>
</html>